import { Checkbox, Ellipsis, List, NavBar, NumberKeyboard, PasscodeInput, Tag, Toast } from 'antd-mobile';
import { AddCircleOutline, MoreOutline } from 'antd-mobile-icons';
import React, { Component } from 'react';
import service from '../../api';
import './Order.scss'


class Order extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            defaultAddress: [],
            confirmOrder: [],
            flag: false,
            value:''
        }
    }
    async componentDidMount() {
        // 默认地址
        var data = await service.address.defaultAddress({ userid: localStorage.getItem('userid') })
        console.log(data);
        var res = await service.order.confirmOrder({ userid: localStorage.getItem('userid'), time: localStorage.getItem('time') })
        console.log(res);

        this.setState({
            defaultAddress: data.data.data,
            confirmOrder: res.data.data
        })
    }
    toModify(index: any) {
        var data = this.state.defaultAddress[index]
        this.props.history.push({ pathname: '/modify', state: { data } })
    }
    // 支付
    async toOrder() {
        this.setState({
            flag: true
        })
        var res = await service.order.deleteCartItem({userid:localStorage.getItem('userid')})
        console.log(res);
        
    }

    fill(value:any){
        console.log(value);
        if (value == 123456) {
            this.props.history.push('/success')
            Toast.show({
                content: '支付成功',
            })
        }else{
            Toast.show({
                content: '密码错误',
            })
        }
        
    }
    render() {
        return (
            <div className='order'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} right={<MoreOutline style={{ fontSize: 35 }} />}>订单页</NavBar>
                </div>


                <div className="main">
                    {
                        this.state.defaultAddress.map((item: any, index: any) => {
                            return (
                                <div className="box" key={index}>
                                    <div className="left">
                                        <Checkbox defaultChecked={item.isDefault} className='check' />
                                        <div className="name">
                                            <span>{item.name}</span>
                                            <span>{item.tel}</span>
                                            {item.isDefault == true ?
                                                <Tag round color='danger'>默认</Tag> : ''}
                                            <p>{item.province + item.city + item.county + item.addressDetail}</p>
                                        </div>
                                    </div>
                                    <div className="right">
                                        <AddCircleOutline onClick={() => { this.toModify(index) }} fontSize={30} />
                                    </div>
                                </div>
                            )
                        })
                    }

                </div>


                <div className="shop">
                    {
                        this.state.confirmOrder.map((items: any, index: any) => {
                            return (
                                <div className="box2" key={index}>
                                    <img src={items.img1} alt="" />
                                    <Ellipsis className="name" rows={2} direction='end' content={items.proname} />
                                    <div className="price">¥ {items.originprice}</div>
                                </div>
                            )
                        })
                    }
                </div>

                <List mode='card'>
                    <List.Item extra='按照支付设置的顺序扣款'>
                        扣款方式
                    </List.Item>
                    <List.Item extra='京东' >配送</List.Item>
                    <List.Item extra='商品赠送'>退换无忧</List.Item>
                    <List.Item extra='0.00'>运费</List.Item>
                    <List.Item extra='-¥120.00'>立减</List.Item>
                </List>




                {/* 去支付 */}
                <div className="submit">
                    <p>合计: <span>¥{ }</span></p>
                    <button className='but' onClick={() => { this.toOrder() }}>去支付</button>
                </div>


                {this.state.flag == true && <div className="put" >
                    <PasscodeInput onFill={(value)=>{this.fill(value)}} seperated style={{ '--cell-gap': '16px', 'marginLeft': '25px' }} keyboard={<NumberKeyboard />} />
                </div>}

            </div>
        );
    }
}

export default Order;